<template>
	<view class="content">
		<view class="content-head">
			<view class="content-title">
				{{areaOutsideEditor.title}}
			</view>
			<image @click="cancel" class="content-title-cancel" src="/static/images/others/cancel.png" mode=""></image>
			<view class="" style="height: 50px;">
				<om-topbutton class="om-topbutton" :hasBgColor="true" placeHolder="搜索地址" @click='searchTab'></om-topbutton>
			</view>
			<view class="content-title-show">
				<view class="content-title-showSelect">
					<view :class="{'content-title-showSelect-active':(index == active)}" 
						class="content-title-showSelect-item" v-for="(item,index) of selectArr" :key="index"
						@click="showItemClick(index)" >
						<view class="">
							{{item.title}}
						</view>
					</view>
					<view v-show="showSelect" :class="{'content-title-showSelect-active':!isBack}" style="margin-left:15px">
						{{'请选择'}}
					</view>
				</view>
			</view>
		</view>
		<view class="parent-area-scroll">
			<view class="parent-area-scroll-tips">
				<view class="area-scroll-tips">
					{{'当前选择的是：' + (placeItem.dicname || placeItem.title || '') }}
				</view>
				<view @click="comfirm" class="om-save-nbtn area-scroll-tips-btn" style="width: 100rpx;text-align: center;" v-show="placeItem.selectableDestinations">
					{{'选好了'}}
				</view>
				<view @click="comfirm" class="om-save-nbtn area-scroll-tips-btn" style="width: 100rpx;text-align: center;" v-show="!placeItem.selectableDestinations">
					{{'继续'}}
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="area-scroll-view">
				<view class="content-place flex" v-for="(item,index) in showList" :key="index">
					<view class="content-place-name">
						<view @click="placeClick(item,1)"  :class="{'content-place-name-check_check_color':item.checked}" class="content-place-name-check">
							<view class="" >
								{{item.dicname}}
							</view>
							<view v-show="item.checked" class="content-place-name-check_check">
								{{'√'}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		errorModal,
		getUrl
	} from '@/static/js/common.js'
	export default{
		name:'OmAreaOutside',
		props:{
			title:{
				type:String,
				default:''
			},
			areaOutsideEditor:{
				type:Object,
				default:{}
			},
			areaOutsideString:{
				type:String,
				default:()=>{}
			}
		},
		data(){
			return{
				isFixed:false,
				showObj:{},
				selectArr:[],
				active:0,
				isBack:false,
				placeItem:{},
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				showList:[],
				showSelect: true,
				omBusinessTripType: '',
				onlyChinaFlag: true,
			}
		},
		methods:{
			goTop(e) {
				let _that = this
				_that.scrollTop = _that.old.scrollTop
				_that.$nextTick(function() {
					_that.scrollTop = 0
				});
			},
			scroll(e) {
				let _that = this
				_that.old.scrollTop = e.detail.scrollTop
			},
			searchTab(){
				var url = getUrl(this.areaOutsideEditor.link, this.areaOutsideEditor.linkParam)
				uni.navigateTo({
					url: url
				})
			},
			cancel(){
				let _that = this
				_that.$emit('cancle')
			},
			comfirm(){
				let _that = this
				if(!_that.placeItem.selectableDestinations){
					if(!_that.placeItem.dicname && !_that.placeItem.title){
						errorModal(_that,"提示信息",'请选择地点！',()=>{
							
						})
					}else{
						errorModal(_that,"提示信息",(_that.placeItem.dicname || _that.placeItem.title) + '不能选择！',()=>{
							
						})
					}
				}else{
					_that.$emit('selected',_that.selectArr,_that.areaOutsideEditor,_that.placeItem)
				}
			},
			showItemClick(index){
				let _that = this
				_that.isBack = true
				_that.active = index
				if(index == 0){
					_that.om.request(
						"regions/findCountryTreeList",
						{
							id: '',
							onlyChinaFlag: _that.onlyChinaFlag
						}
					).then(res=>{
						_that.showList = res
						if(_that.selectArr.length > 0){
							_that.isBack = true
							_that.active = 0
							
							for(let i=0;i<res.length;i++){
								if(res[i].id == _that.selectArr[0].id)
								_that.$set(_that.showList[i],'checked',true)
							}
						}
						_that.placeItem = _that.selectArr[0]
					})
				}else{
					_that.placeClick({id:_that.selectArr[index].id,
					title:_that.selectArr[index].title,
					isSelect:_that.selectArr[index].isSelect,
					state:_that.selectArr[index].state,
					selectableDestinations:_that.selectArr[index].selectableDestinations,
					},2)
				}
			},
			placeClick(item,type){
				let _that = this
				_that.placeItem = item
				if(type == 1){
					_that.showSelect = true
					_that.isBack = false
				}
				
				if(item.state == "closed"){
					if(item.isSelect){
						let num = '';
						for(let i=0; i<_that.selectArr.length; i++){
							if(_that.selectArr[i].id == item.id){
								if(i>0){
									num = _that.selectArr[i-1].id
								}
							}
						}
						
						_that.om.request(
							"regions/findCountryTreeList",
							{
								id: num,
								onlyChinaFlag: _that.onlyChinaFlag
							}
						).then(res=>{
							for(let i=0; i<res.length; i++){
								if(res[i].id == item.id){
									_that.showList = res
									_that.$set(_that.showList[i],'checked',true)
								}
							}
						})
					}else{
						_that.om.request(
							"regions/findCountryTreeList",
							{
								id: item.id,
								onlyChinaFlag: _that.onlyChinaFlag
							}
						).then(res=>{
							_that.selectArr.splice(Number(_that.active),1,{title:item.dicname || item.title,id:item.id,isSelect:true,state:item.state,selectableDestinations:item.selectableDestinations})
							_that.showList = res
							_that.active += 1
							let flag = true;
							let num = 0;
							for(let i=0;i<_that.selectArr.length;i++){
								if(_that.selectArr[i].id == item.id){
									num = i;
									if(i<_that.selectArr.length-1){
										for(let r=0;r<_that.showList.length;r++){
											if(_that.selectArr[i+1].id == _that.showList[r].id){
												flag = false;
											}
										}
										
									}
									
								}
							}
							
							if(flag && _that.selectArr.length > (num+1)){
								_that.selectArr.splice(num+1)
							}
						})
					}
				}else{
					if(type == 2){
						let num = '';
						for(let i=0; i<_that.selectArr.length; i++){
							if(_that.selectArr[i].id == item.id){
								if(i>0){
									num = _that.selectArr[i-1].id
								}
							}
						}
						
						_that.om.request(
							"regions/findCountryTreeList",
							{
								id: num,
								onlyChinaFlag: _that.onlyChinaFlag
							}
						).then(res=>{
							for(let i=0; i<res.length; i++){
								if(res[i].id == item.id){
									_that.showList = res
									_that.$set(_that.showList[i],'checked',true)
								}
							}
						})
					}else{
						if(!item.selectableDestinations){
							errorModal(_that,"提示信息",(item.dicname || item.title) + '不能选择！',()=>{
								
							})
						}else{
							_that.$emit('selected',_that.selectArr,_that.areaOutsideEditor,_that.placeItem)
						}
					}
				}
				_that.goTop()
			},
		},
		mounted(){
			let _that = this
			var omBusinessTripType = uni.getStorageSync("omBusinessTripType");
			omBusinessTripType = Number(omBusinessTripType.replace(/[^\d]/g, ''));
			if(_that.areaOutsideEditor.businessTripType == 1){//出发城市
				if(omBusinessTripType == 39415 || omBusinessTripType == 39416){
					_that.onlyChinaFlag = true
				}else{
					_that.onlyChinaFlag = false
				}
			}
			if(_that.areaOutsideEditor.businessTripType == 2){//到达城市
				if(omBusinessTripType == 39415 || omBusinessTripType == 39417){
					_that.onlyChinaFlag = true
				}else{
					_that.onlyChinaFlag = false
				}
			}

			if(_that.areaOutsideEditor.addressId){
				_that.showSelect = false
				_that.om.request(
					"regions/findUntilCountryParentIdList",
					{
						id: _that.areaOutsideEditor.addressId,
						onlyChinaFlag: _that.onlyChinaFlag
					}
				).then(res=>{
					if(res.succeed){
					    let arr = res.value;
						let num = '';
						if(arr.length>1){
							num = arr[arr.length-1].id
						}
						if(num){
							for(let i=0; i<arr.length; i++){
								_that.selectArr.push({title:arr[i].dicname,id:arr[i].id,isSelect:true,state:arr[i].state,selectableDestinations:arr[i].selectableDestinations})
								_that.isBack = true
								_that.active = i
								if(i == arr.length-2){
									_that.om.request(
										"regions/findCountryTreeList",
										{
											id: arr[i].id,
											onlyChinaFlag: _that.onlyChinaFlag
										}
									).then(sres=>{
										for(let r=0; r<sres.length; r++){
											if(sres[r].id == num){
												_that.showList = sres
												_that.$set(_that.showList[r],'checked',true)
											}
										}
									})
								}
							}
							_that.placeItem = _that.selectArr[_that.selectArr.length-1]
						}else{
							_that.om.request(
								"regions/findCountryTreeList",
								{
									id: '',
									onlyChinaFlag: _that.onlyChinaFlag
								}
							).then(sres=>{
								for(let r=0; r<sres.length; r++){
									if(sres[r].id == arr[0].id){
										_that.selectArr.push({title:arr[0].dicname || arr[0].title,id:arr[0].id,isSelect:true,state:arr[0].state,selectableDestinations:arr[0].selectableDestinations})
										_that.isBack = true
										_that.active = 0
										_that.showList = sres
										_that.$set(_that.showList[r],'checked',true)
									}
								}
								_that.placeItem = _that.selectArr[0]
							})
						}
					}
				})
			}else{
				_that.om.request(
					"regions/findCountryTreeList",
					{
						id: '',
						onlyChinaFlag: _that.onlyChinaFlag
					}
				).then(res=>{
					_that.showList = res
				})
			}
		}
	}
</script>

<style scoped>
	.content , .content-title{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
	.content{
		width: 100%;
		height: 600px;
		background-color: #fafafa;
	}
	.content-title{
		width: 100%;
		height: 35px;
		text-align: center;
		font-size: 15px;
		line-height: 35px;
		font-weight: bold;
		background-color: white;
	}
	.content-place{
		line-height: 40px;
		padding-left: 15px;
	}
	.area-scroll-view{
		height:400px;
	}
	.parent-area-scroll{
		position: relative;
	}
	.content-head{
		position: relative;
	}
	.content-title-cancel{
		width:30rpx;
		height: 30rpx;
		position: absolute;
		top:25rpx;
		right:30rpx;
	}
	.content-place-key , .area-scroll-tips , .content-title-showNoSelect{
		color:#8c8c8c ;
	}
	.content-place-key{
		width: 10px;
	}
	.area-scroll-tips{
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fafafa;
		padding-left:15px;
	}
	.content-title-show{
		position: relative;
		height: 90rpx;
		background-color: white;
	}
	.content-title-showSelect{
		display: flex;
		height: 90rpx;
		line-height: 90rpx;
		flex-direction: row;
	}
	.content-title-showSelect-item , .content-title-showNoSelect{
		margin-left: 15px;
	}
	.content-title-showSelect-active{
		color: #4297ED;
	}
	.content-place-name{
		width: 100%;
	}
	.content-place-name-check{
		display: flex;
		justify-content: space-between;
	}
	.content-place-name-check_check{
		position: absolute;
		left: 90%;
	}
	.parent-area-scroll-tips{
		position: relative;
	}
	.area-scroll-tips-btn{
		position: absolute;
		right: 15px;
		top: 5px;
		border-radius: 10rpx;
	}
	.content-place-name-check_check_color{
		color: #4297ED;
	}
</style>                                                  
